*{
    padding:0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
html, body {
    width: 100%;
    #header {
        padding: 10px 10%;
        a {
            text-decoration: none;
            color: black;
        }
    }
    overflow-x: hidden;
}
.btn {
    display: none;
    float:right;
    margin-top: 25px;
    border: 0;
    border-radius: 5px;
    width: 40px;
    height: 40px;
}
#header .logo {
    img{
        width: 180px;
    }
}
#header div.nav {
    margin: 0 auto;
    width: 80%;
    height: 50px;
}
#header ul.nav-bar {
    list-style: none;
    float: right;
    line-height: 40px;
    margin-top: 30px;
    text-align: center;
    li{
        margin-left: 5px;
        width: 80px;
        :hover{
            border-bottom: 0;
        }
    }
    :hover{
        border-bottom: 1px solid #208cb0;
        cursor: pointer;
    }
}
#header ul.nav-bar li {
    float:left;
    padding: 0 10px;
}

.banner {
    margin-top: 40px;
    width: 100%;
    height: 600px;
    .swiper-container{
        width: 100%;
        height: 600px;
    }
    img{
        width: 100%;
        height: 600px;
    }
}
.content{
    background-color: white;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
    .brief{
        margin-top: 2%;
        width: 64%;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        margin-left: 17.5%;
        .title{
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            font-size: 2em;
            line-height: 1.8em;
            span{
                display: flex;
                justify-content: center;
                border-bottom: 2px solid #208cb0;
            }
        }
        .article{
            font-size: 1.3em;
            color: slategray;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            margin-top: 20px;
            span{
                padding-right: 1em;
            }
            .image{
                img{
                    width: 350px;
                    height: 270px;
                }
            }
        }
    }
    .news{
        margin-top: 2%;
        width: 100%;
        display: flex;
        flex-direction: column;
        .title{
            font-size: 2em;
            line-height: 1.8em;
            display: flex;
            justify-content: center;
            span{
                display: flex;
                justify-content: center;
                border-bottom: 2px solid #208cb0;
            }
        }
        .container{
            margin-left: 15%;
            width: 70%;
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
            :hover{
                background-color: #208cb0;
                color: white;
                cursor: pointer;
            }
            .row{
                border: 1px solid #dee2e6;
                .row-title{
                    padding: .3em;
                    font-size: 1.3em;
                }
                .row-time{
                    padding: .3em;
                    padding-left: .5em;
                    font-size: .8em;
                }
            }
        }
        img{
            width: 300px;
            height: 280px;
        }
    }
    .product{
        margin-top: 2%;
        width: 90%;
        display: flex;
        flex-direction: column;
        margin-left: 5%;
        .title{
            font-size: 2em;
            line-height: 1.8em;
            display: flex;
            justify-content: center;
            span{
                display: flex;
                justify-content: center;
                border-bottom: 2px solid #208cb0;
            }
        }
        .carousel{
            width: 70%;
            margin-top: 20px;
            margin-left: 15%;
            .carousel-cell {
                width: 25%;
                height: 300px;
                margin-right: 10px;
            }
        }
    }
    .product-mid{
        margin-top: 2%;
        width: 100%;
        display: flex;
        flex-direction: column;
        display: none;
        .title{
            font-size: 2em;
            line-height: 1.8em;
            display: flex;
            justify-content: center;
            span{
                display: flex;
                justify-content: center;
                border-bottom: 2px solid #269950;
            }
        }
        .product-list{
            width: 70%;
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
            margin-left: 15%;
            .product-li{
                margin-top: 20px;
                border: 1px solid #dee2e6;
                cursor: pointer;
                .img{
                    img{
                        width: 300px;
                    }
                }
                .product-title{
                    padding: .5em;
                }
            }
        }
    }
}
.footer{
    width: 100%;
    background-color: #f2f2f2;
    color: #595757;
    display: flex;
    font-size: .9em;
    justify-content: center;
    .footer-logo{
        margin-top: 10px;
        margin-right: 2%;
        img{
            width: 250px;
        }
    }
    .footer-content{
        display: flex;
        flex-direction: column;
        .footer-copyright{
            margin-top: 30px;
        }
        div{
            margin-top: 10px;
        }
        margin-right: 2%;
    }
    .footer-qr{
        margin-top: 10px;
        display: flex;
        justify-content: center;
        height: 140px;
        margin-right: 2%;
        .qr{
            display: flex;
            flex-direction: column;
            img{
                margin: 0 auto;
                width: 100px;
            }
            p{
                margin-top: 10px;
                margin-bottom: 10px;
            }
        }
    }
}
@media screen and (max-width: 1920px){
    .content .brief{
        .article{
            .image{
                img{
                    margin-top: 1%;
                }
            }
        }
    }
}
@media screen and (max-width: 1600px){
    #header{
        margin-bottom: -2%;
    }
    #header div.nav{
        width: 90%;
    }
    html, body{
        #header {
            padding: 10px 2%;
            height: 80px;
            overflow: hidden;
            .nav{
                margin-top: -8.5px;
                .nav-bar {
                    margin-top: 15px;
                    border-top: solid 1px #111;
                    width:100%;
                    line-height: 70px;
                    :hover{
                        border: 0;
                    }
                    li {
                        float: none;
                        padding: 0 10px;
                    }
                }
            }
        }
    }
    .btn {
        display: block;
    }
    .content {
        .brief {
            display: flex;
            flex-direction: column;
            .article {
                flex-direction: column;
                .image {
                    display: flex;
                    justify-content: center;
                    img {
                        margin-top: 10px;
                    }
                }
            }
        }
        .news {
            .container{
                flex-wrap: wrap;
                .row{
                    margin-top: 20px;
                    .image{
                        display: flex;
                        justify-content: center;
                    }
                }
            }
        }
        .product{
            display: none;
        }
        .product-mid{
            display: block;
            .product-list{
                flex-wrap: wrap;
            }
        }
    }
}
@media screen and (max-width:1080px){
    #header{
        margin-bottom: -5%;
    }
    .footer{
        display: flex;
        flex-direction: column;
        .footer-logo{
            display: flex;
            justify-content: center;
            img{
                width: 200px;
                height: 140px;
            }
        }
        .footer-content{
            div{
                display: flex;
                justify-content: center;
            }
        }
    }
}
@media screen and (max-width: 768px){
    #header{
        display: flex;
        justify-content: space-between;
        margin-bottom: 0;
        .nav{
            width: 100%;
        }
    }
    .banner{
        margin-top: 0px;
        height: 200px;
        .swiper-slide img{
            height: 200px;
            width: 100%;
        }
        .swiper-pagination{
            display: none;
        }
    }
    .content .brief{
        margin-left: 5%;
        margin-top: 20px;
        font-size: .8em;
        border: 1px solid #dee2e6;
        border-radius: .5em;
        width: 90%;
        .title{
            margin-top: 5px;
            margin-bottom: 0px;
        }
        .article{
            margin-top: 10px;
            flex-direction: column;
            span{
                display: flex;
                justify-content: center;
                margin-left: .4em;
            }
            .image{
                margin-top: 10px;
                margin-bottom: 10px;
                display: flex;
                justify-content: center;
            }
            .image img{
                margin-top: 0;
                width: 250px;
                height: 200px;
            }
        } 
        .news{
            margin-left: 5%;
            margin-top: 20px;
            font-size: .8em;
            border: 1px solid red;
            border-radius: .5em;
            width: 90%;
        }
        .product{
            margin-left: 5%;
            margin-top: 20px;
            font-size: .8em;
            border: 1px solid red;
            border-radius: .5em;
            width: 90%;
            img{
                width: 0px;
            }
        }
    }
    .footer{
        .footer-content{
            margin-top: -30px;
            .footer-copyright{
                display: flex;
                flex-direction: column;
                span{
                    display: flex;
                    justify-content: center;
                    margin-top: 0px;
                }
            }
            .footer-touch{
                display: flex;
                flex-direction: column;
                span{
                    display: flex;
                    justify-content: center;
                    margin-top: 0px;
                }
            }
            .footer-co{
                display: flex;
                flex-direction: column;
                span{
                    display: flex;
                    justify-content: center;
                    margin-top: 0px;
                }
            }
        }
    }
}